<template>
  <div class="consumerList padding_20">
    <el-input v-model="param.nickName"
              placeholder="请输入姓名"
              class="w-200"
              clearable
              @clear="searchOrder" />
    <el-input v-model="param.loginName"
              placeholder="请输入账号"
              class="w-200"
              clearable
              @clear="searchOrder" />
    <el-date-picker v-model="param.startTime"
                    type="date"
                    placeholder="请选择开始时间"
                    value-format="yyyy-MM-dd"
                    clearable
                    @change="searchOrder"
                    @clear="searchOrder"></el-date-picker>
    <el-date-picker v-model="param.endTime"
                    type="date"
                    placeholder="请选择结束时间"
                    value-format="yyyy-MM-dd"
                    clearable
                    @change="searchOrder"
                    @clear="searchOrder"></el-date-picker>
    <el-button type="primary"
               @click="searchOrder">查 询</el-button>
    <Table :columns="loginId=='1'?userColAdmin:userCol"
           :data="userLists"
           border
           stripe
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="handleView(row)">详情</span>
      </template>
    </Table>
    <page @getList="_getUserList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'

  export default {
    name: "consumerList",
    data () {
      return {
        loginId: sessionStorage.getItem('loginId'),
        userCol: [
          {
            type: 'index2',
            title: '',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '头像',
            key: 'headImageUrl',
            // width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.headImageUrl,
                    preview: 'wdStudioList'
                  },
                  style: {
                    width: '50px',
                    height: '50px',
                    margin: '10px',
                    borderRadius: '50%'
                  }
                }),
              ]);
            }
          },
          {
            title: '账号',
            key: 'loginName',
          },
          {
            title: '用户名',
            key: 'nickName',
          },
          {
            title: '邀请码',
            key: 'inviteCode'
          },
          {
            title: '属地',
            key: 'area'
          },
          {
            title: '出生日期',
            key: 'birthday'
          },
          {
            title: '性别',
            key: 'sex',
            render: (h, params) => {
              let tmp = '';
              if (params.row.sex == 0) {
                tmp = '女';
              } else {
                tmp = '男';
              }
              return h('span', tmp);
            }
          },
          {
            title: '是否在线',
            key: 'isOnline',
            render: (h, params) => {
              if (params.row.isOnline == '0') {
                return h('span', '离线');
              } else {
                return h('span', '在线');
              }
            }
          },
          {
            title: '注册时间',
            key: 'createTime',
            render: (h, params) => {
              if (params.row.createTime) {
                return h('span', this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
              }
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        userColAdmin: [
          {
            type: 'index2',
            title: '',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageNum - 1) * this.page.pageSize + 1);
            }
          },
          {
            title: '医院名称',
            key: 'hospitalName',
          },
          {
            title: '登陆账号',
            key: 'loginName'
          },
          {
            title: '昵称',
            key: 'nickName'
          },
          {
            title: '角色',
            key: 'roleName',
            render: (h, params) => {
              if (params.row.roleName == 0) {
                params.row.roleName = '';
              }
              return h('span', params.row.roleName);
            }
          },
          {
            title: '是否启用',
            key: 'status',
            render: (h, params) => {
              if (params.row.status == '0') {
                return h('span', '禁用');
              } else if (params.row.status == '1') {
                return h('span', '启用');
              } else {
                return h('span', '未分配权限');
              }
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        userLists: [],
        userRoles: [],
        pageTotal: 0,       //总条数
        param: {
          hospitalId: sessionStorage.getItem('hospitalId'),
          nickName: '',
          startTime: null,
          endTime: null,
          loginName:''
        }
      }
    },
    mounted () {
      this._getUserList()
    },
    methods: {
      handleView (row) {
        this.$router.push({ name: 'consumerView', query: { id: row.id } })
      },
      searchOrder () {
        // this.$refs.page.setPageNum();
        this.page.pageIndex=0
        this._getUserList()
      },
      _getUserList () {
        this.ajax({
          type: this.api.consumerList.type,
          url: this.api.consumerList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.userLists = data.object
            this.pageTotal = data.totalNum
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style lang="scss" scoped>
</style>
